PDF Viewer Control
Description
Displays a PDF.
Discussion
The PDFViewer control displays a PDF in a web or mobile application. The PDF Viewer can be used instead of an iFrame to display PDFs. The control allows you to navigate from page to page in a multi-page PDF document.
The PDF Viewer includes a toolbar above the area where the PDF is displayed. Using the icons and controls in the toolbar, you can navigate pages, change the page zoom, download the document, or view info about the PDF presented as a JSON object. The toolbar options shown are customized in the PDF Viewer's properties (described below).
To add a PDF Viewer control, select [PDFViewer Control] from the Other Controls section. Your app can include as many PDFViewer controls as needed in your app.
Configuring the PDF Viewer
The PDF Viewer's size, default PDF, and container style is configured in the PDFViewer Properties.
- Property
- Description
- Control ID
The ID of the PDF Viewer Control.
- Width
Defaults to 8in. The width of the PDF Viewer. The Width is defined using CSS units (in, cm, pt, px).
- Height
Defaults to 6in The height of the PDF Viewer. The Height is defined using CSS units (in, cm, pt, px).
- PDF name
Optional. The PDF file to display. The PDF name is a URL, either to a remote file or a PDF published to the webroot on Application Server. PDFs in the local webroot are referenced using a relative URL.
If displaying a PDF from the webroot in an application with the security framework enabled, you must make sure to configure security permissions for the PDF to allow access. Otherwise, Alpha Anywhere will deny access to the PDF file.
Use the {dialog.object}.pdfViewerLoad() method to dynamically set the PDF at runtime.
- Container class name
One or more optional classes to apply to the container that contains the PDF Viewer.
- Container in-line style
One or more CSS style attributes applied to the container that contains the PDF Viewer.
- Break
Defines if a column break should be added after the control. Options are After and None.
- Break
- Description
- After
A column break will be added after the PDF Viewer control. The vertical height of the break is defined by Break height.
- None
No break will be added.
- Break height
The size of the break. Break value is a vertical distance between the control and the next control. This property is only available when Break is set to After.
- Background color
The background color shown behind the PDF. Color is specified as a CSS color value. Click the
smart field button for the Background color property to open the Color Picker.- Has file download button
If checked, the file download icon is shown in the PDF Viewer's toolbar.
- Has PDF Info button
If checked, the PDF info icon is shown in the PDF Viewer's toolbar.
- Fill Panel Card
If checked, the PDF Viewer will fill the Panel Card that contains it.
- Initial resolution
The initial page resolution. Defaults to Fit to page. The resolution can be Fit to page or a numeric value representing the zoom scale (in percent.) E.g. if Initial resolution is set to 100, the PDF will be displayed at 100%.
- Control bar hide
If checked, hides the toolbar that contains the PDF page navigation buttons, page scale, etc.
Viewing PDFs Stored in Amazon S3
The PDF Viewer can be used to view PDF files stored in Amazon S3. In order to view the files, however, you allow the 'GET' method in your bucket CORS policy. For example:
[
{
"AllowedHeaders": [
"Content-Type",
"x-amx-acl",
"origin"
],
"AllowedMethods": [
"PUT",
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]The 'GET' method is used to request a resource (i.e. read), such as a PDF file, from Amazon S3. To learn more about setting up Amazon S3 for use with Alpha Anywhere, see How to Configure an Amazon S3 Bucket.
PDF Viewer Methods
The following methods can be used with the PDF Viewer control:
- Method
- Description
- {dialog.object}.pdfViewerLoad()
Loads a PDF to display in the PDF Viewer.
- {dialog.object}.setControlDisplay()
Shows or hides the PDF Viewer.
- {dialog.object}.getPointer()
Gets a pointer to the container that contains the PDF Viewer control.
- {dialog.object}.getControl()
Gets the object for the PDF Viewer control.
Videos
How to Display PDF Files using the PDFViewer Control
In this video, we show how to display a PDF file in a UX component using the PDFViewer control.
See Also